<template>
  <div style="height: 100%;width: 100%;">
    <div class="department-outer">
      <div class="zoom-box">
        <zoom-controller v-model="zoom" :min="20" :max="200" />
      </div>
      <div class="view-box">
        <org-view
          v-if="data"
          :data="data"
          :zoom-handled="zoomHandled"
          @on-menu-click="handleMenuClick"
        />
      </div>
    </div>

    <el-dialog
      :title="formInitOption.title"
      :visible.sync="formInitOption.showModal"
    >
      <OrgForm
        ref="orgForm"
        :pid="formInitOption.pid"
        :action="formInitOption.action"
      />
      <div slot="footer">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button v-if="formInitOption.action === 'add'" type="error" @click="reset">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import OrgView from '@/components/org-view/org-view';
import ZoomController from '@/components/zoom-controller/zoom-controller';
import OrgForm from '@/views/admin/org/form';
import { remove, tree } from '@/api/admin/org';
import './tree.scss';

export default {
  components: {
    OrgView,
    ZoomController,
    OrgForm
  },
  data() {
    return {
      data: null,
      zoom: 100,
      formInitOption: {
        title: '',
        action: '',
        showModal: false,
        id: null,
        pid: null
      }
    };
  },
  computed: {
    zoomHandled() {
      return this.zoom / 100;
    },
    id() {
      return this.$route.params.id;
    }
  },
  mounted() {
    this.getDepartmentData();
  },
  methods: {
    handleMenuClick({ data, key }) {
      switch (key) {
        case 'new':
          this.handleAdd(data);
          break;
        case 'edit':
          this.edit(data);
          break;
        case 'delete':
          this.remove(data);
          break;
        default:
          this.$Message.success({
            duration: 5,
            content: '暂未实现'
          });
      }
    },
    getDepartmentData() {
      tree(this.id).then(response => {
        const result = response.data;
        if (result.code === 0) {
          this.data = result.data;
        } else {
          this.$Notice.error({
            title: result.code,
            desc: result.msg
          });
        }
      });
    },
    handleAdd(params) {
      this.formInitOption.title = '新增';
      this.formInitOption.action = 'add';
      this.formInitOption.showModal = true;
      this.reset();
      this.$refs.orgForm.setPid(params.id);
    },
    edit(params) {
      this.formInitOption.title = '编辑';
      this.formInitOption.action = 'edit';
      this.formInitOption.showModal = true;
      this.formInitOption.id = params.id;
      this.formInitOption.pid = params.pid;
      this.$refs.orgForm.getInfo(params.id);
    },
    remove(params) {
      this.$Modal.confirm({
        title: '请确认',
        content: '将删除【' + params.label + '】机构信息？',
        draggable: true,
        loading: true,
        onOk: () => {
          remove(params.id).then(response => {
            const result = response.data;
            if (result.code === 0) {
              this.$Notice.success({
                title: '成功'
              });
              this.getDepartmentData();
            } else {
              this.$Notice.error({
                title: result.code,
                desc: result.msg
              });
            }
            this.$Modal.remove();
          });
        }
      });
    },
    handleSubmit() {
      this.$refs.orgForm.handleSubmit();
    },
    reset() {
      this.$refs.orgForm.reset();
    }
  }
};
</script>
